---
title: Lista horizontal
description: Una guía para usar Fluid DnD con una simple lista horizontal.
---

import SingleHorizontalList from "@/components/vue/SingleHorizontalList.vue";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de números

En este ejemplo vamos usar **Fluid DnD** para ordernar una lista horizontal.
Primero, vamos a crear una lista de números y vamos añadir el propiedad `direction` con valor igual `horizontal`:

export const listOfNumbers = `<script setup lang="ts">
  const list = ref([1, 2, 3, 4, 5]);
  const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>`;

<Code code={listOfNumbers} lang="vue" />

### Creando la vista

export const highlightsDnD = ['direction="horizontal"','.number-list'];

export const listOfNumberInsideDnD = `<template>
  <div ref="parent" class="number-list">
    <div class="number" v-for="(element, index) in list" :index="index">
      {{ element }}
    </div>
  </div>
</template>

<style>
/* ... */
.number-list {
  display: flex;
  flex-direction: row;
}
</style>

`;

<Code code={listOfNumberInsideDnD} lang="vue" mark={highlightsDnD} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <SingleHorizontalList client:load />
</div>
